<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>角色</title>
		<script src="js/vue.js"></script><!-- 必须先导入vue -->
		<script src="js/axios.min.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/common.js"></script>
		<link rel="stylesheet" href="css/index.css" />
	</head>
	<body>
		<div id="app">
		    <el-button size="mini" @click="add">添加</el-button>
			<el-table size="small" :data="roleList" border style="width: 100%">
				<el-table-column prop="rolename" label="角色名称" width="180">
				</el-table-column>
				<el-table-column prop="description" label="所在部门">
				</el-table-column>
				<el-table-column width="250px" label="操作">
					<template slot-scope="scope">
						<el-button size="mini"  @click="updateRole(scope.row)">编辑</el-button>
						<el-button size="mini" @click="handleDelete(scope.$index,scope.row)"
							type="danger">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			
			<el-dialog  title="添加" :visible.sync="dialogFormVisible">
				<el-form :model="formadd">
					<el-form-item label="角色名称"   label-width="80px">
						<el-input v-model="formadd.rolename" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="部门名称"   label-width="80px">
						<el-input v-model="formadd.description" autocomplete="off"></el-input>
					</el-form-item>
					
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="dialogFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="addsubmit">确 定</el-button>
				</div>
			</el-dialog>
			
			<el-dialog  title="修改" :visible.sync="updateFormVisible">
				<el-form :model="formadd">
					<el-form-item label="角色名称"   label-width="80px">
						<el-input v-model="formadd.rolename" autocomplete="off"></el-input>
					</el-form-item>
					<el-form-item label="部门名称"   label-width="80px">
						<el-input v-model="formadd.description" autocomplete="off"></el-input>
					</el-form-item>
					
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button @click="updateFormVisible = false">取 消</el-button>
					<el-button type="primary" @click="updatesubmit">确 定</el-button>
				</div>
			</el-dialog>
		</div>
	</body>
	<script>
		new Vue({
			el:"#app",
			data:{
				updateFormVisible:false,
				roleList:[],
				formadd:{id:"",rolename:"",description:""},
				dialogFormVisible:false
			},methods:{
				add(){
					this.dialogFormVisible=true
				},
				updateRole(row){
					this.updateFormVisible=true;
					this.formadd={id:row.id,rolename:row.rolename,description:row.description}
				},
				updatesubmit(){
					axios.post(API + "s/updaterole", this.formadd).then(res => {
						if (res.data) {
							this.$message("修改成功")
							
							this.initData();
						} else {
							this.$message("修改失败")
						}
						this.updateFormVisible=false;
					})
				},
				initData(){
					axios.get(API + "s/selectAllRole").then(res => {
						console.log(res.data.data.menuList);
						this.roleList = res.data.data.roleList;
					})
				},addsubmit(){
					axios.post(API + "s/insertrole", this.formadd).then(res => {
						if (res.data) {
							this.$message("新增成功")
							
							this.initData();
						} else {
							this.$message("新增失败")
						}
						this.dialogFormVisible=false
					})
				},handleDelete(index,row){
					this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						axios.post(API + "s/deleterole", row).then(res => {
							if (res.data) {
								this.$message.success("删除成功")
								this.initData();
							} else {
								this.$message("删除失败")
							}
						})
					})
				}
			},
			mounted() {			
				this.initData();
			}
		})
	</script>
</html>